<template>
  <div class="race">
    <div class="r-header">
      <div class="r-h-row">
        <div class="r-h-title"> <i class="iconfont icon-bisaihuodong"></i>比赛列表</div>
        <OjSearch class="search-input" placeholder="搜索比赛" @search="(v) => { searchParams.name = v }"></OjSearch>
        <el-dropdown class="dropdown1">
          <div class="selectBox">
            <span v-show="searchParams.format == -1">赛制</span>
            <span v-for="(item) in formats" :key="item.value" v-show="searchParams.format == item.value">{{ item.label }}</span>
            <i class="iconfont icon-xiangxia"></i>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="changeFormat(-1)">全部</el-dropdown-item>
              <el-dropdown-item v-for="(item, index) in formats" :key="item.value" @click="changeFormat(item.value)">{{ item.label }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown class="dropdown2">
          <div class="selectBox">
            <span v-for="(item, index) in status" :key="item.value" v-show="searchParams.status == item.value">{{ item.label }}</span>
            <i class="iconfont icon-xiangxia"></i>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="(item, index) in status" :key="item.value" @click="changeStatus(item.value)">{{ item.label }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <el-scrollbar class="r-list">
      <raceCard v-for="item in raceList.records" :key="item.id" :item="item"></raceCard>
    </el-scrollbar>
    <div class="footer">
      <el-pagination class="pagination" :page-sizes="[20, 50, 99]" background small layout="prev, pager, next,sizes"
        :total="Number(raceList.total)" v-model:current-page="searchParams.pageNum"
        v-model:page-size="searchParams.pageSize" />
    </div>
  </div>
</template>

<script setup>
import { getRaceListAPI } from "@/api/ojAPI/ojAPI"
import { ref, onMounted, watch, reactive } from "vue"
import raceCard from "./components/raceCard.vue"
import OjSearch from '@/components/common/ojSearch.vue'
import { formats,status } from './config'

onMounted(() => {
  getRaceList()
})
const searchVal = ref('')
watch(searchVal, (newV) => {
  if (newV.length == 0) {
    searchParams.name = newV
  }
})
const searchParams = reactive({
  pageSize: 20,
  pageNum: 1,
  name: '',
  format: -1,
  status: 2
})
watch(searchParams, (newV) => {
  getRaceList()
})
const changeFormat = (value) => {
  searchParams.format = value
}
const changeStatus = (value) => {
  searchParams.status = value
}

const raceList = ref({
  records: [],
  total: 20
})
const getRaceList = async () => {
  await getRaceListAPI(searchParams).then(res => {
    if (res.data.code === 200) {
      raceList.value = res.data.data
    }
  }).catch(err => {
    console.log(err)
  })
}

</script>

<style lang="less" scoped>
.race {
  width: 95%;
  height: 85vh;
  padding-top: 10px;
  margin: 0 auto;
  border-radius: 16px;
  background: rgba(0,0,0,0);
  padding: 10px;
  display: flex;
  flex-direction: column;

  .r-header {
    width: 100%;
    height: 10%;
    padding-bottom: 5px;

    .r-h-row {
      display: flex;

      .r-h-title {
        height: 30px;
        line-height: 30px;
        font-size: 22px;
        font-weight: 600;
        color: #555;
        display: flex;
        text-align: center;
        margin-right: auto;
        .iconfont {
          margin: auto 0;
          font-weight: normal;
          font-size: 28px;
        }
      }

      .search-input {
        height: 30px;
        line-height: 30px;
        width: 15%;
        margin: auto 30px;
      }

      .dropdown1 {
        margin: auto 2% auto 0;
      }

      .dropdown2 {
        margin: auto 2% auto 0;
      }

      .selectBox {
        color: #888;
        font-size: 16px;
        color: #888;
      }
    }

  }

  .r-list {
    display: flex;
    flex-direction: column;
    height: 84%;
  }

  .footer {
    height: 5%;
    margin: auto 0 0 0;
    display: flex;
    justify-content: center;
  }
}
</style>